
  /* TitlePane 
 * 
 * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
 * 
 * TitlePane title:
 * 1. TitlePane title (default styling): 
 * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
 
 * 2. hovered TitlePane title (ie, mouse hover on a title bar)
 * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
 * 
 * 3. active TitlePane title (ie, mouse down on a title bar)
 * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
 * 
 * 
 * TitlePane Content Container:
 * 1. outer/inner container: 
 * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
 

*/
.claro .dijitTitlePaneTitle {
    background-color : #e6e6e7;
    background-image : url("images/titlebar.png");
    background-repeat : repeat-x;
    border-width : 1px;
    border-style : solid;
    border-color : #b5bcc7;
    padding : 0px 7px 3px 7px;
    min-height : 17px;
    color : #131313;
}
.dj_ie6 .claro .dijitTitlePaneTitle {
    background-image : none;
}
.claro .dijitTitlePaneTitleHover {
    background-color : #abd6ff;
    border-color : #769dc0;
}
.claro .dijitTitlePaneTitleActive {
    background-color : #7dbefa;
    border-color : #769dc0;
    background-position : 0px -136px;
}
.claro .dijitTitlePaneTitleFocus {
    margin-top : 3px;
    padding-bottom : 2px;
}
.claro .dijitTitlePane .dijitArrowNode {
    background-image : url('images/spriteArrows.png');
    background-repeat : no-repeat;
    height : 8px;
    width : 7px;
}
.claro .dijitTitlePane .dijitOpen .dijitArrowNode {
    background-position : 0px 0px;
}
.claro .dijitTitlePane .dijitClosed .dijitArrowNode {
    background-position : -14px 0px;
}
.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode {
    color : #000;
}
.claro .dijitTitlePaneContentOuter {
    background : #ffffff;
    border-style : solid;
    border-width : 1px;
    border-color : #b5bcc7;
    border-top : none;
}
.claro .dijitTitlePaneContentInner {
    padding : 10px;
}
.claro .dijitTitlePaneTextNode {
    margin-left : 4px;
    margin-right : 4px;
    vertical-align : text-top;
}
